-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix some styling on the showcase page #7014
Conversation
Deploy preview for using-postcss-sass failed. Built with commit 6b00fda https://app.netlify.com/sites/using-postcss-sass/deploys/5b71739cc965925091c6960c |
Deploy preview for using-drupal ready! Built with commit 6b00fda |
Deploy preview for gatsbygram ready! Built with commit 6b00fda |
www/src/views/shared/styles.js
Outdated
@@ -132,6 +132,10 @@ const styles = { | |||
borderBottom: `none !important`, // i know i know | |||
boxShadow: `none !important`, // but people really want this | |||
}, | |||
searchInput: { | |||
paddingLeft: `1.4rem`, | |||
fontFamily: typography.options.headerFontFamily.join(`,`), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @alexandernanberg! 👋
Thank you for this — looking good!
Just one request regarding the search input — could you please
- remove the input's border
- reduce the input width
- adjust the input
placeholder
color - add focus styles
so that they match the search form in the header?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good, done that now! 👍
Deploy preview for gatsbyjs failed. Built with commit 6b00fda https://app.netlify.com/sites/gatsbyjs/deploys/5b71739ac965925091c69600 |
@fk The search input should look a lot more like the on in the header now. We still might want to change the mobile layout of it though, but that could be another PR I guess. |
Deploy preview for using-remark failed. Built with commit 6b00fda https://app.netlify.com/sites/using-remark/deploys/5b71739dc965925091c6961e |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perfect! Thank you @alexandernanberg! 🤗
* master: (597 commits) Add a site(https://mojaave.com) to showcase list (gatsbyjs#7275) feat: create a doc for open source pair programming sessions (gatsbyjs#7266) [docs] Add video lesson to the StaticQuery docs (gatsbyjs#7249) [v2] docs - update page query docs (gatsbyjs#7285) [v2] docs "Styling" overview (gatsbyjs#7288) Remove delay (gatsbyjs#7273) add site (gatsbyjs#7291) Adding new site to the showcase. (gatsbyjs#7281) chore(release): Publish initial webpack externals support (gatsbyjs#7245) add missing package dependencies (gatsbyjs#7259) add: custom configuration overview (gatsbyjs#7231): tutorial part four updates (gatsbyjs#7240) [www] Fix showcase search, checkbox styles (gatsbyjs#7014) (gatsbyjs#6584): Restructure plugin overview and plugin authoring pages (gatsbyjs#7229) Use Hubspot form for email subscription (gatsbyjs#7233) Adding bootstrap CV starter (gatsbyjs#7207) Stub Articles and new names (gatsbyjs#7200) Improve readability of verbose logging code in wordpress source plugin (gatsbyjs#7146) Update hash link to scroll to right section of page (gatsbyjs#7161) ...
* Fix some styling on the showcase page * Better search input style * Better aligned checkbox * No outline for focused search input
What
Some style fixes to the showcase page
Before and after shots
We probably want to add some more styling to to search input and some other areas, might create a new PR for that